<template>
  <div class="main-classfiy">
    <ul class="classfiy-left">
      <li
        v-for="(item, index) in classfiylist"
        :key="item.id"
        @click="num = index"
        :id="num == index ? 'active' : ''"
      > 
        {{ item.menuName }}
      </li>
    </ul>
    <ul class="classfiy-right">
      <li
        v-for="(item, index) in classfiylist"
        :key="index"
        :class="index == num ? 'hide' : ''"
      >
        <div class="classfiy-right-img">
          <img :src="item.mbsecondPicture" alt="" />
          <addclassfiy
          :getdata="item.childMenus"
          />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import {menuData} from '../api/goods' 
import addclassfiy from '../components/addclassfiy.vue'
export default {
    components:{
        addclassfiy,
    },
  data() {
    return {
      classfiylist: [],
      num: 0,
      isShow: true,
    };
  },

  created() {
    menuData().then((res) => {
      // console.log(res.data.childMenus.childMenus);
      this.classfiylist = res.data.childMenus.childMenus;
    });
  },
};
</script>

<style src="../assets/css/classfiy.css" scoped></style>